<template>
  <div class="content" :style="contentStyle">
    <div
      class="article"
      v-for="(articleItem,index) in item.articles"
      :key="index"
      :style="articleStyle(articleItem)"
      @touchmove.stop
      @touchend.stop="item.isFinish?null:articleTouch()"
    >
      <div
        class="deletion"
        :style="deletionStyle(articleItem)"
        @touchend.stop="articleItem.isTouch?null:deletionTouch(articleItem,index,$event)"
      >
        <div class="mark" v-if="articleItem.isPoint&& !articleItem.isTouch"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixins } from "@/common/mixins/assignmentMixins.js"
import {mapActions} from "vuex";
export default {
  mixins: [mixins],
  data() {
    return {
      deletionCount: 0
    }
  },
  created() {
    this.deletionCount = this.item.articles.filter(item => { return item.isTouch }).length
  },
  computed: {
    deletionStyle(item) {
      return function (item) {
        return {
          position: "absolute",
          background: item.isTouch ? "url(" + item.deletionUrl + ")0 0/100% 100%" : "",
          width: parseFloat(item.deletionWidth) / 100 * this.mainWidth + 'px',
          height: parseFloat(item.deletionHeight) / 100 * this.mainHeight + 'px',
          left: parseFloat(item.deletionLeft) / 100 * this.mainWidth - parseFloat(item.left) / 100 * this.mainWidth + "px",
          top: parseFloat(item.deletionTop) / 100 * this.mainHeight - parseFloat(item.top) / 100 * this.mainHeight + "px",
          filter: item.isTouch ? "drop-shadow(0px 0px 0.2rem gold)" : ""
        }
      }
    }
  },
  methods: {
    articleTouch: function () {
      this.retryMusic()
      if(this.isSeedEntery){
        setTimeout(()=>{this.$emit('nextAssignment')},600)
                            } else {
                                this.$emit("losShow")
                            }
      this.updateOperated({questionIndex:this.questionIndex,param:this.index})
      this.addAnswer({
        id: this.item.id,
        type: false
      })
    },
    deletionPoint: function () {
      if (this.deletionCount < this.item.articles.length) {
        setTimeout(() => { this.$set(this.item.articles[this.deletionCount], "isPoint", true) }, 8000)
        setTimeout(() => { this.$set(this.item.articles[this.deletionCount], "isPoint", false) }, 11000)
      }
    },
    deletionTouch: function (articleItem, index, event) {
      this.deletionCount++
      this.$set(articleItem, "isTouch", true)
      this.deletionPoint()
      if (this.item.articles.filter(item => { return !item.isTouch }).length === 0) {
        this.sucMusic()
        this.setFireworkPlay(event)
       setTimeout(()=>{
                            this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                            this.addAnswer({
                                id: this.item.id,
                                type: true
                            })
                        },1000)
      }
    },
    ...mapActions("mainStatus", ["setLoading"])
  },
  watch: {
    activeIndex: function (activeIndex) {
      if (this.index === activeIndex) this.deletionPoint()
    }
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../common/stylus/content.styl'
.mark
  background url($urlTitle + 'assignment/缺损部位问号.png') 0 0 / 100% 100%
  position absolute
  width 1rem
  height 1.8rem
</style>
